<template>
  <div class="container">
    <el-row class="home" :gutter="20" justify="center">
      <el-col :span="9" style="margin: 10px 2px 20px 20px">
        <!-- 管理员个人信息 -->
        <el-card>
          <div class="manager">
            <img src="@/assets/images/manager.png" />
            <div class="manager-info">
              <p class="name">{{ EmpName }}</p>
              <p class="access">管理员</p>
            </div>
          </div>
          <div class="create-info">
            <p>
              创建时间:<span>{{ createTime }}</span>
            </p>
            <p>
              真实姓名:<span>{{ TrueName }}</span>
            </p>
          </div>
        </el-card>
        <!-- 操作记录 -->
        <el-card
            style="margin-top: 20px; height: 100%"
            class="operation-record-card"
        >
          <el-table :data="TableData" style="width: 100%" max-height="300px">
            <el-table-column
                prop="OptionTxt"
                label="操作记录"
                header-align="center"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="14" style="margin: 10px 20px 20px 2px">
        <!-- <div class="num"> -->
        <el-card style="height: 100%">
          <p style = "font-size : 36px; text-align: center"><b>公告</b></p>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="今天下午来开会" name="1">
              <div>
                在一楼的一号会议室，技术部集体集会。
              </div>
              <div>
                3:00之前到位置，各团队队长查看自己团队的到会情况。
              </div>
            </el-collapse-item>
            <el-collapse-item title="明天下午来开会" name="2">
              <div>
                控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
              </div>
              <div>
                页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
              </div>
            </el-collapse-item>
            <el-collapse-item title="后天下午来开会" name="3">
              <div>简化流程：设计简洁直观的操作流程；</div>
              <div>
                清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
              </div>
              <div>
                帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
              </div>
            </el-collapse-item>
            <el-collapse-item title="这个周末加班" name="4">
              <div>
                用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
              </div>
              <div>
                结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
        <!-- </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      createTime: "",
      EmpName: "",
      TrueName: "",
      AdminName: "",
      Option: "",
      OptionTime: "",
      TableData: "",
      activeNames: ["1"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    getData() {
      let url = `/api/emp/empinfo`;
      this.$http
          .get(url, { headers: { token: this.token } })
          .then((response) => {
            if (response.data.code === 20000) {
              this.createTime = response.data.data.createTime;
              this.TrueName = response.data.data.trueName;
              this.EmpName = response.data.data.empName;
            } else {
              if (response.data.code === 40100) {
                this.$router.push("/login");
              }
              this.$message.error("请登录");
            }
          })
          .catch((error) => {
            this.$message.error("获取信息失败：" + error.message);
          });
    },
    // 操作记录
    load() {
      let url = `/api/emp/see-option`;
      this.$http
          .get(url, { headers: { token: this.token } })
          .then((response) => {
            if (response.data.code === 20000) {
              this.TableData = response.data.data.map(item => {
                return {
                  OptionTxt: `${this.EmpName}进行了 ${item.cway} 操作 ${item.ctime} `,
                  OptionTime: item.ctime
                };
              });
            } else {
              if (response.data.code === 40100) {
                this.$router.push("/login");
              }
              this.$message.error(response.data.msg);
            }
          })
          .catch((error) => {
            this.$message.error("获取信息失败：" + error.message);
          });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
    this.getData();
    this.load();
    }
  },
};
</script>
<style lang="less" scoped>
.operation-record-card {
  bottom: 20px;
  overflow: auto;
  max-height: calc(100vh - 40px - 100px);
}
.manager {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 40px;
  }

  .manager-info {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
      font-size: 15px;
    }
  }
}
.infinite-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.create-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;
    margin: 0 auto;
    text-align: left;
    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}
.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  .el-card {
    width: 32%;
    margin-bottom: 20px;
  }
}
</style>
